<template>
	<view class="add-all">
		<!-- 维修新增/待修/维修 listType==='0' ||  -->
		<view v-if="listType==='9' || listType==='0' || listType==='1'">
			<view class="information-content">
				<view class="information-scroll">
					<repair 
						ref="repair"
						:list="list" 
						:form1="form1"
						:isChange="isChange"
						@formEcho="formEcho"
					>	
					</repair>
			
					<!-- 签名部分 -->
					<view class="sign">
						<view class="sign-box">
							<text class="label">服务顾问签名</text>
							<view 
								class="sign-img"
								@click="toSignPage('servicer')"
								:style="signBoxBgImg"
							>
								<image v-if="servicerSign" class="img" :src="servicerSign"></image>
							</view>
						</view>
						<view class="sign-box">
							<text class="label">客户签名</text>
							<view 
								@click="toSignPage('customer')"
								class="sign-img"
								:style="signBoxBgImg"
							>
								<image v-if="customerSign" class="img" :src="customerSign"></image>
							</view>
						</view>
					</view>
					
					<view class="fixed" v-if="listType==='9'">
						<!-- 底部总金额区域 -->
						<view class="information-bottom">
							<view class="bottom-text">
								<view>{{form1.listMapWi.length || 0}}项工时,{{form1.listMapPart.length || 0}}项备件,{{form1.listMapOther.length || 0}}项其他</view>
								<view class="textColor">
									<text class="textSize">费用合计：</text>
									<u-icon name="rmb" color="#ff7947" size="30"></u-icon><text class="totalNum">{{form1.totals || 0}}</text>
								</view>
							</view>
						</view>
						<!-- 底部按钮区域 -->
						<view class="bottom-btn">
							<u-button v-for="(item,index) in btnList" :key="index" :type="item.type" :style="btnWidth"
								@click="pass(item.methods)">{{item.label}}</u-button>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 质检 结算  交车  234-->
		<view v-else>
			<view class="quality-content">
				<!-- 客户信息 -->
				<view class="information-fixed">
					<view class="information-title">客户信息</view>
					<formItem :label="item.label" v-for="(item,index) in customerList" :isSlot="item.isSlot"
						:slotName="item.slotName" :key="index" :titleType="item.titleType" :rightIcon="item.rightIcon"
						:disabled="true" v-model="form1[item.model]">
						<!-- 送修人 -->
						<template #repairMan>
							{{$utils.eliminate(form1['repairMan'])}}
						</template>
						<!-- 车牌号 -->
						<template #carLicense>
							{{$utils.eliminate(form1['carLicense'])}}
						</template>
						<!-- 联系电话 -->
						<template #repairTel>
							<view class="phoneColor">
								<u-icon name="repairTel" color="#4f75be" size="36"></u-icon>{{$utils.eliminate(form1['repairTel'])}}
							</view>
						</template>
					</formItem>
				</view>
				
				<view class="information-scroll">
					<!-- 维修/结算 -->
					<view class="tabStype">
						<u-tabs :list="list2" :is-scroll="false" :current="current2" @change="val=>{current2 = val}">
						</u-tabs>
					</view>
					<!-- 维修内容 -->
					<view v-show="current2 === 0">
						<view class="margin-bottom1">
							<repair
								ref="repair"
								:list="repairList"
								@formEcho="formEcho"
								:form1="form1"
								:isChange="true"
							>	
							</repair>
						</view>
						<!-- 底部总金额区域 -->
						<view class="information-bottom">
							<view class="bottom-text">
								<view class="textColor-left">{{form1.listMapWi.length || 0}}项工时,{{form1.listMapPart.length || 0}}项备件,{{form1.listMapOther.length || 0}}项其他</view>
								<view class="textColor">
									<text class="textSize">客户费用：</text>
									<text class="totalNum">{{form1.totals || 0}}</text>
								</view>
							</view>
							<view :class="btnList.length>1?'bottom-btn-s':'bottom-btn-c'">
								<u-button v-for="(item,index) in btnList" :key="index" :type="item.type" :style="btnWidth"
									@click="pass(item.methods)">{{item.label}}</u-button>
							</view>
						</view>
					</view>
					<!-- 结算内容 -->
					<view v-show="current2 === 1">
						<settlement :list="settlementList" :form2="form2" :currentStep="currentStep"></settlement>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 底部总金额区域 -->
		<view class="public-money-bottom" v-if="listType==='0' || listType==='1'">
			<view class="bottom-text">
				<view class="textColor-left">{{form1.listMapWi.length || 0}}项工时,{{form1.listMapPart.length || 0}}项备件,{{form1.listMapOther.length || 0}}项其他</view>
				<view class="textColor">
					<text class="textSize">客户费用：</text>
					<text class="totalNum">{{form1.totals || 0}}</text>
				</view>
			</view>
			<view :class="btnList.length>1?'bottom-btn-s':'bottom-btn-c'">
				<u-button v-for="(item,index) in btnList" :key="index" :type="item.type" :style="btnWidth"
					@click="pass(item.methods)">{{item.label}}</u-button>
			</view>
		</view>
		
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import formItem from '@/components/lt-formItem/index.vue';
	import progressBar from '@/pages/views/bookingManagement/components/progressBar/index.vue';
	import repair from './components/repair.vue';
	import settlement from './components/settlement.vue';
	import { repairManageAdd, repairManageDetails,updWorkOrder,byPointTransferRoom } from '@/api/bookingManagement.js'
	import storage from '@/utils/Stroage.js'
	
	export default {
		components: {
			formItem,
			progressBar,
			repair, //维修
			settlement,
		},
		onLoad(option){
			if(option.listType){
				this.listType = option.listType
				this.queryForm(option.repairOrderId,option.vin)//请求获得页面数据
			}
			if(this.listType === '1'){
				this.isChange = false
			}
			this.btnData(this.listType)//底部按钮显示
			if(this.listType === '9'){//获得暂存信息
				let workRepair=storage.get('workOrderInformation')
				if(workRepair){
					this.form1 = workRepair
					this.servicerSign = this.form1.servicerSign
					this.customerSign = this.form1.customerSign
				}
				
			}
		},
		computed: {
			btnWidth() {
				return `width:${100/this.btnList.length - 5}%`
			},
			signBoxBgImg() {//签名
				return `background-image: url("${this.$imgBaseUrl}images/u2264.png")`;
			}
		},
		data(){
			return {
				listType:'9',//9为新增
				servicerSign: '', //服务顾问签名
				customerSign: '', //客户签名		
				form1: {},
				form2: {},
				isChange:true,
				current2: 0,//维修/结算
				currentStep: 3,
				editType:true,
				list2: [{
					name: '维修'
				}, {
					name: '结算'
				}],
				// 维修-显示字段
				list: [{
						label: ' 维修工单信息',
						titleType: 'solid',
						slotName: 'test',
						isSlot: true,
					},
					{
						label: '送修人',
						slotName: 'repairMan',//
						isSlot: true,
						disabled:true
					},
					{
						label: '车牌号',
						slotName: 'carLicense',//
						isSlot: true
					}, {
						label: '联系电话',
						slotName: 'repairTel',//
						isSlot: true
					}, {
						label: '进厂时间',
						model: 'repairTime',//
						rightIcon: 'arrow-right',
						disabled: true
					}, {
						label: '行驶里程',//
						slotName: 'mileage',
						isSlot: true
					}, {
						label: '预计交车时间',
						model: 'preGetDate',//
						rightIcon: 'arrow-right',
						disabled: true
					}, {
						label: '服务顾问',//
						slotName: 'saName',
						isSlot: true
					}, {
						label: '预约单',//
						slotName: 'reserveOrderCode',
						isSlot: true
					}, {
						label: '服务活动',
						slotName: 'serviceActivities',
						isSlot: true
					}, {
						label: '套餐精品',
						slotName: 'packageBoutique',
						isSlot: true
					}, {
						label: '保养项目',
						slotName: 'maintenanceProgram',
						isSlot: true
					}, {
						label: '客户描述',
						slotName: 'csDesc',
						isSlot: true
					}, {
						label: '上次建议项目',
						slotName: 'scRecommendItem',
						isSlot: true
					}, {
						label: '本次建议项目',
						slotName: 'recommendItem',
						isSlot: true
					}, {
						label: '取送车',
						slotName: 'carDelivery',
						isSlot: true
					}, {
						label: '拖车救援',
						slotName: 'trailerRescue',
						isSlot: true
					}, {
						label: '委外门店',
						slotName: 'authorizedDlr',
						isSlot: true
					}
				],
				// 底部按钮部分
				btnList: [],
				// 结算，交车-客户信息
				customerList: [
					{
						label: '送修人',
						model: 'repairMan',
						slotName: 'repairMan',
						isSlot: true
					},
					{
						label: '车牌号',
						model: 'carLicense',
						slotName: 'carLicense',
						isSlot: true
					},
					{
						label: '联系电话',
						model: 'repairTel',
						slotName: 'repairTel',
						isSlot: true
					},
				],
				//维修信息
				repairList: [{
						label: '进厂时间',
						model: 'repairTime',//
						disabled: true
					}, {
						label: '行驶里程',//
						model: 'mileage',
						disabled: true
					}, {
						label: '预计交车时间',
						model: 'preGetDate',//
						disabled: true
					}, {
						label: '服务顾问',//
						model: 'saName',
						disabled: true
					}, {
						label: '预约单',//
						model: 'reserveOrderCode',
						disabled: true
					}, {
						label: '服务活动',
						model: 'serviceActivities',
						disabled: true
					}, {
						label: '套餐精品',
						model: 'packageBoutique',
						disabled: true
					}, {
						label: '保养项目',
						model: 'maintenanceProgram',
						disabled: true
					}, {
						label: '客户描述',
						model: 'csDesc',
						disabled: true
					}, {
						label: '上次建议项目',
						model: 'scRecommendItem',
						disabled: true
					}, {
						label: '本次建议项目',
						model: 'recommendItem',
						disabled: true
					}, {
						label: '取送车',
						model: 'carDelivery',
						disabled: true
					}, {
						label: '拖车救援',
						model: 'trailerRescue',
						disabled: true
					}, {
						label: '委外门店',
						model: 'authorizedDlr',
						disabled: true
					}
				],
				settlementList:[],
			}
		},
		methods:{
			//form回显
			formEcho(val){
				this.form1 = val
			},
			
			// 签名
			toSignPage(type) {
				const url = `/pages/autograph/index?type=${type}`;
				wx.navigateTo({
					url
				});
			},
			getimgUrl(e,type){
				const that = this 
				uni.getFileSystemManager().readFile({
					filePath: e[type],
					encoding: 'base64',
					success: r => {
						that[type] = 'data:image/jpg;base64,' + r.data
					}
				})
			},
			// 查询页面数据
			async queryForm(repairOrderId,vin){
				let params = {
					repairOrderId:repairOrderId,
					vin:vin
				}
				let res = await repairManageDetails(params)
				if(res.result === '1'){
					this.form1 = res.rows
					this.form2 = JSON.parse(JSON.stringify(res.rows))
					if(this.form1.actionName.length>0){
						this.form1.serviceActivities= this.form1.actionName[0].actionName//服务活动显示
					}
					this.servicerSign = this.form1.servicerSign
					this.customerSign = this.form1.customerSign
				}
			},
			
			// 底部按钮
			btnData(val){
				if(val === '9'){//新增
					this.btnList = [{
							label: '暂存',
							type: 'info',
							methods: 'temporaryStorage'
						},
						{
							label: '保存',
							type: 'info',
							methods: 'saveForm'
						},
						{
							label: '转车间',
							type: 'primary',
							methods: 'transferRoom'
						}
					]
				}else if(val === '0'){//待修详情
					this.btnList = [
								{
									label: '保存',
									type: 'info',
									methods: 'saveForm'
								},
								{
									label: '转车间',
									type: 'primary',
									methods: 'transferRoom'
								}
							]
				}else if(val === '1'){//维修 个人信息不可更改
					this.list.forEach(val=>val.disabled = true)
					this.btnList = [
						{
							label: '保存',
							type: 'primary',
							methods: 'saveForm'
						}
					]
				}else if(val === '2'){//质检
					this.btnList = [
						{
							label: '保存',
							type: 'primary',
							methods: 'saveForm'
						}
					]
				}else if(val === '3'){//结算
					this.btnList = [
						{
							label: '保存',
							type: 'primary',
							methods: 'saveForm'
						}
					]
				}
			},
			
			// 点击按钮
			async pass(val){
				const { repair } = this.$refs;
			
				//保存
				let formData =  JSON.parse(JSON.stringify(repair.form))
				console.log(999,formData)
				
				
				if(val === 'temporaryStorage'){//新增页面 暂存
					formData.servicerSign = this.servicerSign
					formData.customerSign = this.customerSign
					
					storage.set('workOrderInformation', formData)
					this.$refs.uToast.show({
						title: '暂存成功',
						type: 'default',
					})
					
					setTimeout(function() {
						uni.navigateBack()//返回
					}, 1000);	
					return
				}
				
				// 校验维修类别是否填写
				if(formData.listMapWi && formData.listMapWi.length>0){
					for(let i=0;i<formData.listMapWi.length;i++){
						if(!formData.listMapWi[i].retRepairType){
							this.$refs.uToast.show({
								title: '请选择维修项目的维修类别',
								type: 'warning',
							})	
							return
						}
					}
				}
				if(formData.listMapPart && formData.listMapPart.length>0){
					for(let i=0;i<formData.listMapPart.length;i++){
						if(!formData.listMapPart[i].retRepairType){
							this.$refs.uToast.show({
								title: '请选择维修备件的维修类别',
								type: 'warning',
							})	
							return
						}
					}
				}
				if(formData.listMapOther && formData.listMapOther.length>0){
					for(let i=0;i<formData.listMapOther.length;i++){
						if(!formData.listMapOther[i].retRepairType){
							this.$refs.uToast.show({
								title: '请选择其他费用的维修类别',
								type: 'warning',
							})	
							return
						}
					}
				}
				
				// 车牌号非空校验
				if(!formData.carLicense){
					this.$refs.uToast.show({
						title: '请选择车牌号',
						type: 'warning',
					})	
					return
				}
				
				// 客户车辆信息
				if(!formData.paramMap || !formData.paramMap[0]){
					formData.paramMap=[]
					formData.paramMap.push({})
				}
			
				let params = {
					...formData,
					...formData.paramMap[0]
				}
				params.servicerSign = this.servicerSign//服务顾问签名
				params.customerSign = this.customerSign//服务顾问签名
				
				if(val === 'saveForm' && this.listType === '9'){//新增保存
					let res = await repairManageAdd(params)
					if(res.result === '1'){
						if(storage.get('workOrderInformation')){
							storage.remove('workOrderInformation')//移除暂存数据
						}
						this.$refs.uToast.show({
							title: res.msg,
							type: 'default',
						})	
						setTimeout(function() {
							uni.navigateBack()//返回
						}, 1000);
					} else{
						this.$refs.uToast.show({
							title: res.msg,
							type: 'warning',
						})	
					}
				}
				// 修改保存并转车间/新增直接转车间（新增，待修页面）
				if(this.listType === '0' || val === 'transferRoom'){
					let res1 = this.listType === '0' ? await updWorkOrder(params) : await repairManageAdd(params)
					if(res1.result === '1'){//修改保存成功后转车间
						let res = await byPointTransferRoom(params)
						if(res.result === '1'){
							this.$refs.uToast.show({
								title: res.msg,
								type: 'default',
							})	
							setTimeout(function() {
								uni.navigateBack()//返回
							}, 1000);
						}else{
							this.$refs.uToast.show({
								title: res.msg,
								type: 'warning',
							})	
						}
					}else{
						this.$refs.uToast.show({
							title: res1.msg,
							type: 'warning',
						})	
					}
				}
				// 维修修改保存
				if(this.listType === '1' || this.listType === '2' || this.listType === '3'){
					let res = await updWorkOrder(params)
					if(res.result === '1'){
						this.$refs.uToast.show({
							title: res.msg,
							type: 'default',
						})	
						setTimeout(function() {
							uni.navigateBack()//返回
						}, 1000);
					}else{
						this.$refs.uToast.show({
							title: res.msg,
							type: 'warning',
						})	
					}
				}	
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.add-all {
		.information-content {
			.information-scroll {
				width: 100%;
				overflow: hidden;
				overflow-y: scroll;
				margin-bottom: 340rpx;
				
				// 签名
				.sign {
					display: flex;
					justify-content: space-between;
					background-color: #fff;
					padding: 20rpx 30rpx;
				
					.sign-box {
						display: flex;
						flex-direction: column;
						width: 340rpx;
					}
				
					.sign-img {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 320rpx;
						height: 320rpx;
						margin-top: 20rpx;
						border-radius: 10rpx;
						overflow: hidden;
				
						.img {
							width: 300rpx;
							height: 300rpx;
						}
					}
				}
			}
			
			.fixed {
				background-color: #fff;
				position: fixed;
				width: 100%;
				left: 0;
				bottom: 0;
				z-index: 999;
				
				// 底部费用合计
				.information-bottom {
					display: flex;
					flex-direction: column;
					background-color: #fff;
					margin-top: 16rpx;
					padding: 0 16rpx 16rpx 16rpx;
				
					.bottom-text {
						display: flex;
						flex-direction: row;
						padding: 14rpx 14rpx;
						justify-content: space-between;
						align-items: center;
						border-bottom: 1rpx solid #f5f5f5;
						color: #9f9f9f;
				
						.textColor {
							display: flex;
							align-items: center;
							font-weight: bold;
							color: #ff7947;
				
							.textSize {
								color: #333333;
							}
							.totalNum {
								font-size: 26px;
							}
						}
					}
				}
				
				// 底部按钮
				.bottom-btn {
					display: flex;
					font-weight: bold;
					flex-direction: row;
					background-color: #fff;
					padding: 20rpx 24rpx;
					margin-bottom: 70rpx;
					justify-content: space-between;
				}
			}
		}
		
		
		.quality-content{
			.information-fixed {
				background-color: #fff;
				padding: 16rpx;
				margin: 24rpx;
				border-radius: 10rpx;
				.information-title {
					padding-left: 16rpx;
					padding: 16rpx 0 16rpx 16rpx;
					font-size: 32rpx;
					font-family:auto;
					font-weight: bold;
				}
			}
				.margin-bottom1 {
					margin-bottom: 320rpx;
				}
				.information-bottom {
					background-color: #fff;
					position: fixed;
					width: 100%;
					left: 0;
					bottom: 0;
					z-index:99;
					.bottom-text {
						display: flex;
						flex-direction: row;
						padding: 45rpx 25rpx;
						justify-content: space-between;
						align-items: center;
						border-bottom: 1rpx solid #f5f5f5;
						
						.textColor-left {
							color: #9f9f9f;
						}
						.textColor {
							display: flex;
							align-items: center;
							color: #000;
						}
					}
				}
		}
		// 修改保存 底部费用合计
		.public-money-bottom{
			background-color: #fff;
			position: fixed;
			width: 100%;
			left: 0;
			bottom: 0;
			z-index:99;
			.bottom-text {
				display: flex;
				flex-direction: row;
				padding: 45rpx 25rpx;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1rpx solid #f5f5f5;
				
				.textColor-left {
					color: #9f9f9f;
				}
				.textColor {
					display: flex;
					align-items: center;
					color: #000;
				}
			}
		}
		
		
		// 底部按钮
		.bottom-btn-c {
			display: flex;
			font-weight: bold;
			flex-direction: row;
			background-color: #fff;
			padding: 20rpx 24rpx;
			margin-bottom: 70rpx;
			justify-content: center;
		}
		.bottom-btn-s {
			display: flex;
			font-weight: bold;
			flex-direction: row;
			background-color: #fff;
			padding: 20rpx 24rpx;
			margin-bottom: 70rpx;
			justify-content: space-between;
		}
	}
	
</style>
